<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZUI-静姐姐-后台通用模板1</title>
		<link rel="stylesheet" href="css/zui.css" />
		<link rel="stylesheet" href="css/public.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/zui.min.js" ></script>
		<link href="css/zui.datatable.min.css" rel="stylesheet">
		<script src="js/zui.datatable.min.js"></script>
	</head>
	<body>
		<div class="y-conRightmain scrollbar-hover">
			<ol class="breadcrumb y-borderB">
			  <li><a href="your/url/">Home</a></li>
			  <li><a href="your/url/">Library</a></li>
			  <li class="active">Data</li>
			</ol>
			
			<div class="y-bgfff y-padLR-20 y-padB-20 y-marR-20 card">
				<h3 class="y-borderB y-padB-10 y-marB-20 clearfix y-marT-10">
					<span style="line-height: 30px;">订单列表<i class="y-fontSize-12">(共1000条记录)</i></span>
					<button class="btn btn-primary pull-right" type="button" onclick="orderAdd()">新增订单</button>
				</h3>
				
				<div class="breadcrumb y-border y-bgGaryPale clearfix">
					<!--日期选择-->
					  
					    <div class="col-sm-11 y-padL0 y-padR0">
					    	<link href="css/datetimepicker.min.css" rel="stylesheet">
						    <script src="js/datetimepicker.min.js"></script>
						    <div class="col-sm-1 y-padL0 y-padR0">
						        <input type="text" class="form-control form-date" placeholder="下单开始时间">
						    </div>
						    <div class="col-sm-1 y-padL0 y-padR0">
						        <input type="text" class="form-control form-date" placeholder="下单结束时间">
						    </div>
						    
						    <script>
						  	// 选择时间和日期
								$(".form-date").datetimepicker(
								{
									language:  "zh-CN",
								    weekStart: 1,
								    todayBtn:  1,
								    autoclose: 1,
								    todayHighlight: 1,
								    startView: 2,
								    minView: 2,
								    forceParse: 0,
								    format: "yyyy-mm-dd"
								});
						  </script>
						  <!--日期选择		end-->
					  	  <div class="col-sm-1 y-padL0 y-padR0">
						      <select class="form-control" id="exampleInputAddress1">
						        <option>支付状态</option>
						        <option>待付款</option>
						        <option>已付款</option>
						      </select>
						    </div>
						    <div class="col-sm-1 y-padL0 y-padR0">
						      <select class="form-control" id="exampleInputAddress1">
						        <option>支付方式</option>
						        <option>微信</option>
						        <option>支付宝</option>
						        <option>货到付款</option>
						      </select>
						    </div>
						    <div class="col-sm-1 y-padL0 y-padR0">
						      <select class="form-control" id="exampleInputAddress1">
						        <option>发货状态</option>
						        <option>未发货</option>
						        <option>已发货</option>
						      </select>
						    </div>
						    <div class="col-sm-1 y-padL0 y-padR0">
						      <select class="form-control" id="exampleInputAddress1">
						        <option value="">订单状态</option>
		                        <option value="0">待确认</option>
		                        <option value="1">已确认</option>
		                        <option value="2">已收货</option>
		                        <option value="3">已取消</option>
		                        <option value="4">已完成</option>
		                        <option value="5">已作废</option>
						      </select>
						    </div>
						    <div class="col-sm-1 y-padL0 y-padR0">
						      <select class="form-control" id="exampleInputAddress1">
						        <option>收货人</option>
						        <option>订单编号</option>
						      </select>
						    </div>
							<div class="col-sm-2 y-padL0 y-padR0">
						      <input type="text" class="form-control" placeholder="关键字">
						    </div>
							<button type="submit" class="btn btn-primary">检索</button>
					   </div>
					<button type="submit" class="btn btn-primary pull-right">导出表格</button>
					
				</div>
				
				<!-- HTML 代码 -->
				<table class="table datatable">
				    <thead>
				      <tr>
				        <th class="y-widthBig y-breakAll">订单编号</th>
				        <th class="y-widthBig y-breakAll">收货人</th>
				        <th>总金额</th>
				        <th>实付金额</th>
				        <th>订单状态</th>
				        <th>支付状态</th>
				        <th>发货状态</th>
				        <th>支付方式</th>
				        <th>配送方式</th>
				        <th>下单时间</th>
				        <th>操作</th>
				      </tr>
				    </thead>
				    <tbody>
				      <tr>
				      	<td class="y-widthBig y-breakAll">201709121341152857</td>
				      	<td class="y-widthBig y-breakAll">静姐姐:15038234850</td>
				      	<td>100.00</td>
				      	<td>120.00</td>
				      	<td>已确认</td>
				      	<td>已支付</td>
				      	<td>未发货</td>
				      	<td>微信支付</td>
				      	<td>申通物流</td>
				      	<td>下单时间</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16" onclick="orderDetail()"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				    </tbody>
				 </table>
			
				<div class="clearfix">
					<button class="btn" type="button">删除</button>
					<ul class="pager pager-loose pull-right">
						<li class="previous active"><a href="#">首页</a></li>
					    <li class="previous"><a href="#">上页</a></li>
					    <li class="previous"><a href="#">1</a></li>
					    <li class="previous"><a href="#">下页</a></li>
					    <li class="previous disabled"><a href="#">尾页</a></li>
				    </ul>
				</div>
			</div>
			
		</div>
				
		<script type="text/javascript">
			$('table.datatable').datatable({
				checkable: true,
				checkByClickRow:false
			});
			function orderAdd(){
				window.location.href="orderAdd.html";
			}
			function orderDetail(){
				window.location.href="orderDetail.html";
			}
		</script>
	</body>
</html>
